<template>
	<view class="select-list-m">
		<view v-for="item,index in listArr" class="select-list-item" :key='index'>
			<view @click="addSelect(index)" :class="{'item-selected':item.selected}">
				<view class="item-content">
					{{item[keyValue]}}
				</view>
			</view>
			<uni-badge v-if="item.selected" class="selected" text="√" size="small" type="primary"></uni-badge>
		</view>
		<slot></slot>
	</view>
	
</template>

<script>
	import uniBadge from '@/components/uni-badge/uni-badge.vue';
	export default{
		components: {
			uniBadge
		},
		props: {
			listArr: {
				type: Array,
				default: ()=>[]
			},
			keyValue:{
				type: String,
				default: 'name'
			}
		},
		data() {
			return {}
			
		},
		methods: {
			addSelect(index) {
				this.$emit('changeSel',index)
				// 不能直接操作props中传的数据
			},
			// 获取数组某值的下标
			// getArrayIndex(obj,arr) {
			// 	const arrs = arr?arr:this.selectArr;
			//     var i = arrs.length;
			//     while (i--) {
			//         if (arrs[i] === obj) {
			//             return i;
			//         }
			//     }
			//     return -1;
			// }
		}
	}
</script>

<style>
	.select-list-m{
		display: inline-block;
	}
	.select-list-item{
		border:1px solid #c87d2f;
		width: 120rpx;
		font-weight: 525;
		display: inline-block;
		margin-right: 10rpx;
		text-align: center;
		position: relative;
		padding: 10rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.selected{
		position: absolute;
		bottom: -7rpx;
		right: -8rpx;
		height: 30rpx;
	}
	.item-selected{
		color: #007AFF;
	}
	/* .select-list-item-grid{
		position: relative;
		border:1px solid #cacaca;
		display: inline-block;
		width: 100rpx;
		text-align: center;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.forbid{
		border-color: #a2a2a2;
		color: #a2a2a2;
	} */
</style>
